<template>
	<view class="app app-bg">
		<view class="money">需付金额: ￥{{ vk.pubfn.priceFilter(money) }}</view>
		<view class="type">
			<text class="logo">选择支付方式</text>
			<!-- <view class="item" @tap="select('wxpay')">
				<image class="icon" src="@/static/home/wx_pay.png"></image>
				<text>微信支付</text>
				<image
					src="@/static/home/choose.png"
					v-if="type === 'wxpay'"
					class="selt"
				></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view> -->
			<view class="item" @tap="select('alipay')">
				<image class="icon" src="@/static/home/ali_pay.png"></image>
				<text>支付宝支付</text>
				<image
					src="@/static/home/choose.png"
					v-if="type === 'alipay'"
					class="selt"
				></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view>
			<view class="item" @tap="select('balance')">
				<image class="icon" src="@/static/home/bal_pay.png"></image>
				<text>钱包支付</text>
				<text class="bal">余额: ￥{{ vk.pubfn.priceFilter(balance) }}</text>
				<image
					src="@/static/home/choose.png"
					v-if="type === 'balance'"
					class="selt"
				></image>
				<image src="@/static/home/choose_no.png" class="selt" v-else></image>
			</view>
		</view>
		<view class="btn" @tap="pay">立即支付</view>
		<u-modal
			content="还没有支付密码，请先前往设置"
			v-model="show"
			@confirm="vk.navigateTo('/pages/user/setting/update-payword')"
		></u-modal>
		<keyboard-pay ref="keyboard" :money="money" @finish="finish"></keyboard-pay>
		<vk-uni-pay ref="vkPay"></vk-uni-pay>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import keyboardPay from "./components/keyboard-pay.vue"

export default {
	components: { keyboardPay },
	data() {
		return {
			oid: "",
			money: 0,
			balance: 0,
			type: "",
			order_number: "",

			flag: false,
			show: false
		}
	},
	onLoad(opt) {
		if (opt.id) {
			this.oid = opt.id
		} else {
			vk.toast("参数不足")
			return uni.navigateBack()
		}
		vk.showLoading("获取中...")
	},
	onShow() {
		this.init()
	},
	methods: {
		// 初始化
		init() {
			vk.callFunction({
				url: "client/order.queryOrderPay",
				data: { oid: this.oid }
			}).then(res => {
				this.flag = res.flag
				this.money = res.money
				this.balance = res.balance
				this.order_number = res.order_number
				vk.hideLoading()
			})
		},
		// 选择支付方式
		select(type) {
			this.type = type
		},
		// 立即支付
		pay() {
			if (!this.type) {
				return vk.toast("请选择支付方式")
			}
			if (this.type === "balance") {
				this.payForBalance()
			} else {
				this.payReal(this.type)
			}
		},
		// 余额支付
		payForBalance() {
			if (this.balance < this.money) {
				return vk.toast("余额不足")
			}
			if (!this.flag) {
				this.show = true
				return
			}
			this.$refs.keyboard.showPop(true)
		},
		finish(payword) {
			vk.callFunction({
				url: "client/order.payForBalance",
				title: "支付中...",
				data: { payword, oid: this.oid }
			}).then(() => {
				this.paySuccess()
			})
		},
		// 微信或支付宝支付
		payReal(type) {
			this.$refs.vkPay.createPayment({
				action: {
					name: "router",
					dataKey: "data",
					actionKey: "$url",
					action: "client/order.createPaymentForService"
				},
				data: {
					provider: type,
					total_fee: this.money,
					out_trade_no: this.order_number
				},
				success: () => {
					this.paySuccess()
				},
				fail: res => {
					if (res.failType === "create") {
						vk.alert(res.msg)
					} else if (res.failType === "request") {
						vk.toast("请求支付失败")
					} else if (res.failType === "result") {
						vk.toast("支付失败")
					}
				},
				cancel: () => {
					vk.toast("用户取消支付")
				}
			})
		},
		// 支付成功
		paySuccess() {
			let pages = getCurrentPages()
			vk.toast("支付成功", "none", 800, () => {
				if (pages[pages.length - 2].route == "pages/order/detail") {
					// 订单详情支付返回原页面
					uni.$emit("paySuccess")
					vk.navigateBack()
				} else {
					// 重定向至订单详情
					uni.$emit("paySuccessTab")
					vk.redirectTo(`/pages/order/detail?_id=${this.oid}`)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.money {
	font-size: 30rpx;
	font-weight: bold;
	padding: 26rpx 20rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}

.type {
	margin: 20rpx 0;
	padding: 26rpx 20rpx 24rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
	.logo {
		display: block;
		font-weight: bold;
		padding-bottom: 10rpx;
	}
	.item {
		display: flex;
		align-items: center;
		padding: 30rpx 0 10rpx 20rpx;
		.icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 18rpx;
		}
		.bal {
			color: #ff8f1e;
			font-size: 24rpx;
			margin-left: 6rpx;
		}
		.selt {
			width: 40rpx;
			height: 40rpx;
			margin-left: auto;
		}
	}
}

.btn {
	background-color: #3ab54a;
	border-radius: 44rpx;
	color: #ffffff;
	padding: 18rpx;
	text-align: center;
	margin-top: 240rpx;
}
</style>
